<template>
	<div class="messSty">
		
		<div v-if="shows1">
			<div>
				<el-input placeholder="请输入邮箱获取验证码" v-model="mail" @keyup.enter.native="confirm">
					<template slot="prepend">邮箱:</template>
				</el-input>
			</div>
			<el-row style="padding-top:30px">
				<el-col :span="12">
					<el-button type="primary" @click="confirm" style="width: 99%;">确定</el-button>
				</el-col>
			
				<el-col :span="12">
					<el-button type="primary" onclick="window.history.go(-1)" style="width: 99%;">取消</el-button>
				</el-col>
			</el-row>
		</div>
		
		<div v-if="shows2">
			<el-row>
				<el-col :span="24">
					<el-input placeholder="请输入验证码" v-model="mes.qqCode" @keyup.enter.native="findPass">
						<template slot="prepend">验证码:</template>
					</el-input>
				</el-col>
			</el-row>
			<br /><br />
			<div>
				<el-input placeholder="请重新设置密码" v-model="mes.newPassword" @keyup.enter.native="findPass">
					<template slot="prepend">设置密码:</template>
				</el-input>
			</div>
			<br /><br />
			<div>
				<el-input placeholder="请再次确认密码" v-model="npassword" @keyup.enter.native="findPass">
					<template slot="prepend">确认密码:</template>
				</el-input>
			</div>

			<br />
			<el-row style="padding-top:30px">
				<el-col :span="12">
					<el-button type="primary" @click="findPass" style="width: 99%;">确定</el-button>
				</el-col>

				<el-col :span="12">
					<el-button type="primary" onclick="window.history.go(-1)" style="width: 99%;">取消</el-button>
				</el-col>
			</el-row>
		</div>
		
	</div>
</template>

<script>
	export default {
		name: 'findUserPassword',
		data() {
			return {
				mes: {
					newPassword: "",
					qqCode:""
				},
				npassword: '',
				mail:"",
				shows1:true,
				shows2: false
			}
		},
		methods: {
			confirm(){
				this.$axios({
				  method: "post",
				  url: "/EmailVerify/qqVerify",
				  params:{"qq":this.mail},
				  headers: { "Content-Type": "application/json",},
				}).then((res) => {
					if(res.data.code==200){
						this.shows1=false,
						this.shows2=true
					}else{
						alert("请正确输入")
					}
				  }).catch((e) => {
				    console.log(e);
				  });
			},
			findPass() {
				if(this.mes.newPassword!=this.npassword){
					alert("密码不一致")
				}else{

					this.$axios({
					  method: "post",
					  url: "/EmailVerify/qqCodeVer",
					  params:this.mes,
					  headers: { "Content-Type": "application/json",},
					}).then((res) => {
						if(res.data.code==200){
							alert("设置成功")
							//路由跳转
							this.$router.push({
								name: "userLogin",
							});
						}
					  }).catch((e) => {
					    console.log(e);
					  });
				}
				
			},
		},

	}
</script>

<style scoped>
</style>
